<template>
  <div>
    <HeroCarousel />
    <div class="container mx-auto">
      <!-- 热门展览预告 -->
      <section class="py-12">
        <h2 class="text-3xl font-display text-primary mb-8">热门展览</h2>
        <!-- 倒计时组件 -->
        <VirtualExhibition />
      </section>
      <!-- 智能推荐 -->
      <ArtworkGrid />
      <!-- 实时拍卖 -->
      <section class="py-12">
        <!-- 拍卖组件 -->
        <div class="min-h-screen bg-gradient-to-b from-indigo-50 to-purple-50 p-4 lg:p-8">
          <!-- 页面标题 -->
          <div class="max-w-7xl mx-auto mb-12 text-center">
            <h1
              class="text-4xl lg:text-5xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-700 to-pink-500">
              艺术影响力排行榜
            </h1>
            <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
              基于全球艺术收藏数据、拍卖记录和社交影响力，实时更新的艺术家排名榜单
            </p>
          </div>
          <!-- 筛选控制区 -->
          <div class="max-w-7xl mx-auto mb-10 bg-white rounded-2xl shadow-lg p-6">
            <div class="flex flex-wrap items-center justify-between gap-4">
              <div class="flex items-center space-x-2">
                <span class="text-gray-700 font-semibold">分类：</span>
                <select v-model="selectedCategory"
                  class="rounded-full bg-indigo-50 border-0 px-4 py-2 text-indigo-700 focus:ring-2 focus:ring-indigo-500">
                  <option value="all">全部类型</option>
                  <option value="painting">绘画</option>
                  <option value="sculpture">雕塑</option>
                  <option value="photography">摄影</option>
                  <option value="digital">数字艺术</option>
                </select>
              </div>
              <div class="flex items-center space-x-2">
                <span class="text-gray-700 font-semibold">地区：</span>
                <select v-model="selectedRegion"
                  class="rounded-full bg-indigo-50 border-0 px-4 py-2 text-indigo-700 focus:ring-2 focus:ring-indigo-500">
                  <option value="global">全球</option>
                  <option value="asia">亚洲</option>
                  <option value="europe">欧洲</option>
                  <option value="america">美洲</option>
                </select>
              </div>
              <div>
                <button
                  class="px-6 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-full hover:shadow-lg transition-all flex items-center">
                  <!-- <Icon name="mdi:filter" class="mr-2" /> -->
                  应用筛选
                </button>
              </div>
            </div>
          </div>
          <!-- 排行榜组件 -->
          <div class="max-w-7xl mx-auto">
            <ArtRanking :title="rankingTitle" :data="artistRankings" :update-frequency="'实时更新'" :user-rank="{
              current: 56,
              trend: +12,
              best: 42
            }" />
          </div>
          <!-- 附加信息部分 -->
          <div class="max-w-7xl mx-auto mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-2xl shadow-lg">
              <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <!-- <Icon name="mdi:chart-bar" class="text-purple-600 mr-2" /> -->
                评选标准
              </h3>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <!-- <Icon name="mdi:check-circle" class="text-green-500 mt-1 mr-2" /> -->
                  <span>拍卖交易金额</span>
                </li>
                <li class="flex items-start">
                  <!-- <Icon name="mdi:check-circle" class="text-green-500 mt-1 mr-2" /> -->
                  <span>美术馆展出频率</span>
                </li>
                <li class="flex items-start">
                  <!-- <Icon name="mdi:check-circle" class="text-green-500 mt-1 mr-2" /> -->
                  <span>学术文献引用次数</span>
                </li>
                <li class="flex items-start">
                  <!-- <Icon name="mdi:check-circle" class="text-green-500 mt-1 mr-2" /> -->
                  <span>社交媒体影响力指数</span>
                </li>
              </ul>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-lg">
              <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <!-- <Icon name="mdi:calendar" class="text-purple-600 mr-2" /> -->
                本月活动
              </h3>
              <div class="space-y-4">
                <div class="flex items-start">
                  <div class="bg-purple-100 rounded-lg p-2 mr-3">
                    <div class="text-purple-800 font-bold">15</div>
                    <div class="text-xs text-purple-600">OCT</div>
                  </div>
                  <div>
                    <div class="font-medium">伦敦苏富比当代艺术夜拍</div>
                    <div class="text-sm text-gray-500 mt-1">伦敦 · 10:00 PM</div>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="bg-pink-100 rounded-lg p-2 mr-3">
                    <div class="text-pink-800 font-bold">22</div>
                    <div class="text-xs text-pink-600">OCT</div>
                  </div>
                  <div>
                    <div class="font-medium">巴黎蓬皮杜艺术中心特展</div>
                    <div class="text-sm text-gray-500 mt-1">巴黎 · 全天</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-gradient-to-br from-purple-600 to-indigo-700 p-6 rounded-2xl shadow-lg text-white">
              <h3 class="text-xl font-semibold mb-4 flex items-center">
                排名追踪服务
              </h3>
              <p class="mb-4 opacity-90">
                订阅服务获取您关注艺术家的排名实时变动通知
              </p>
              <div class="flex space-x-3">
                <input type="email" placeholder="输入您的邮箱"
                  class="flex-1 px-4 py-2 rounded-lg bg-purple-500/30 backdrop-blur-sm border border-purple-400 placeholder-purple-200 text-white">
                <button
                  class="px-4 py-2 bg-white text-purple-700 font-semibold rounded-lg hover:bg-purple-100 transition">
                  订阅
                </button>
              </div>
            </div>
          </div>

          <!-- 页脚 -->
          <footer class="max-w-7xl mx-auto mt-16 pt-8 border-t border-gray-200 text-center text-gray-600">
            <p>© 2023-2025 艺术影响力指数 | 数据每30分钟更新</p>
          </footer>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeroCarousel from '@/components/art/HeroCarousel.vue'
import ArtworkGrid from '@/components/art/ArtworkGrid.vue'
import ArtRanking from '@/components/art/RankingChart.vue'
import VirtualExhibition from '@/components/art/VirtualExhibition.vue'


// 筛选状态
const selectedCategory = ref('all')
const selectedRegion = ref('global')

// 计算标题
const rankingTitle = computed(() => {
  const regionMap: Record<string, string> = {
    global: '全球',
    asia: '亚洲',
    europe: '欧洲',
    america: '美洲'
  }

  return `${regionMap[selectedRegion.value]}当代艺术家影响力排名`
})

// 艺术家数据
const artistRankings = ref([
  {
    name: '草间弥生',
    value: 98.7,
    artwork: 'https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?q=80&w=500',
    change: +2
  },
  {
    name: '班克斯',
    value: 96.2,
    artwork: 'https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?q=80&w=500',
    change: -1
  },
  {
    name: '杰夫·昆斯',
    value: 94.5,
    artwork: 'https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?q=80&w=500',
    change: 0
  },
  {
    name: '大卫·霍克尼',
    value: 92.8,
    artwork: 'https://images.unsplash.com/photo-1578301978010-f467a4e47697?q=80&w=500',
    change: +3
  },
  {
    name: '阿尼什·卡普尔',
    value: 90.3,
    artwork: 'https://images.unsplash.com/photo-1605727218326-3c6b978b403b?q=80&w=500',
    change: +1
  },
  {
    name: '村上隆',
    value: 88.6,
    artwork: 'https://images.unsplash.com/photo-1544787219-68a90c6a94e5?q=80&w=500',
    change: -2
  },
  {
    name: '艾未未',
    value: 86.9,
    artwork: 'https://images.unsplash.com/photo-1578301978691-4f9d4b1eef7e?q=80&w=500',
    change: -1
  },
  {
    name: '辛迪·舍曼',
    value: 84.2,
    artwork: 'https://images.unsplash.com/photo-1578301978343-5ccedf7dff1e?q=80&w=500',
    change: +4
  },
  {
    name: '达明安·赫斯特',
    value: 82.5,
    artwork: 'https://images.unsplash.com/photo-1578301978691-1b2c7b4d4d2b?q=80&w=500',
    change: -3
  },
  {
    name: '翠西·艾敏',
    value: 80.1,
    artwork: 'https://images.unsplash.com/photo-1578301978691-8b6a0a0c0f0d?q=80&w=500',
    change: +2
  }
])

useHead({
  title: '首页 - 艺术综合平台',
  meta: [
    { name: 'description', content: '全球顶级艺术品展示与交易平台' }
  ]
})
</script>